JS中的 call 和 apply

发表于 | 更新于 | 分类于

基本作用

想要深入了解call()和apply() 这两个方法，那么必须要先知道他们的基本作用：

改变对象的执行上下文

什么是执行上下文？

我们在写一个方法的时候，总是会用到一个关键字this，而this的指向就是我们这里所说的执行上下文（执行环境）

首先我们要知道，this指向的永远是调用该方法的对象，如何证明this的指向就是当前对象呢？如下代码：

1
2
3
4
5
function func() {
	this.a = 1;
	console.log(this.a);
}
	func(); //1

代码中方法执行后控制台输出1，由于func是全局对象window下的一个方法，那么调用该方法的对象就应该是全局对象window，所以this理论上指向的对象就应该是window

如果理论成立，而this.a = 1， 也就是说a变量是一个全局变量。在控制台直接输入a或者window.a后回车，会发现输出了1，所以在func这个方法中，this的指向是window

换个方式来验证下：

1
2
3
4
5
6
7
8
9
var person = {
	name: 'xiao ming',
	age: 18,
	who: function () {
		console.log(person === this)
	}
}

person.who(); //true

上面这段代码中who方法person对象的一个属性，被person对象调用，所以this的指向也就是person。

为什么需要改变执行上下文？

简单的说，方便。举个🌰，但不代表所有场景。
小明有一个炒菜的铲子，小明的室友小刚今天想自己做菜吃，但是小刚没有铲子。小刚不想为了做个菜单独买把铲子，于是就借用了小明的铲子，这样既达到了目的，又节省了开支，一举两得。

改变执行上下文也是一样，A对象有一个方法，而B对象因为某种不可言说的情况也需要用到一样的方法，那么这时候我们是单独为B扩展个方法呢，还是借用一下A的方法呢？当然是借用A的啦，即完成了需求，又减少了内存的占用

call()与apply()异同

基本使用

call()

1
function.call(obj[,arg1[,arg2[, [,.argN]]]])
  • 调用call的对象必须是个函数function
  • call的第一个参数将会是function改变上下文后指向的对象，如果不传，将会默认是全局对象window
  • 第二个参数开始可以接受任意个参数，这些参数将会作为function的参数传入function
  • 调用call的方法会立即执行

apply()

1
function.apply(obj[,argArray)

与call方法的使用基本一致，但是只接收两个参数，其中第二个参数必须是一个数组或者类数组，这也是这两个方法很重要的一个区别

数组与类数组小科普

数组我们都知道是什么，它的特征都有哪些呢？

1.可以通过角标调用，如array[0]
2.具有长度属性length
3.可以通过for循环和forEach方法进行遍历

类数组顾名思义，具备的特征应该与数组基本相同，那么可以知道，一个形如下面这个对象的对象就是一个类数组

1
2
3
4
5
6
var arrayLike = {
	0: 'item1',
	1: 'item2',
	3: 'item3',
	length: 3
}

类数组arrayLike可以通过角标进行调用，具有length属性，同时也可以通过for循环进行遍历

我们经常使用的获取dom节点的方法返回的就是一个类数组，在一个方法中使用arguments关键字获取到的该方法的所有参数也是一个类数组

但是类数组却不能通过forEach进行遍历，因为forEach是数组原型链上的方法，类数组毕竟不是数组，所以无法使用

那么如何才能让类数组能够使用forEach呢？
Array.prototype.forEach.call(类数组)

##异同
相同点
都能够改变方法的执行上下文（执行环境），讲一个对象的方法交给另一个对象来执行，并且是立即执行

不同点
call方法从第二个参数开始可以接受任意个参数，每个参数会映射到相应位置的func的参数上，可以通过参数名调用，但是如果将所有的参数作为数组传入，他们会作为一个整体映射到func对应的第一个参数上，之后参数都为空

1
2
3
4
5
6
7
function func(a, b, c) {}

func.call(obj, 1,2,3)
// function接收到的参数实际上是 1,2,3

func.call(obj, [1,2,3])
// function接收到的参数实际上是 [1,2,3],undefined,undefined

apply方法最多只有两个参数，第二个参数接受数组或者类数组，但是都会被转成类数组传入func中，并且会映射到func对应的参数上

1
2
3
4
5
6
7
8
9
10
11
func.apply(obj, [1,2,3])
// function 接收到的参数实际上是1，2，3

func.apply(obj, {
	0: 1,
	1: 2,
	2: 3,
	length: 3
})

// function接收到的参数实际上是1，2，3

两个方法该如何选择？

根据你要传入的参数来做选择，不需要传参或者只有一个参数的时候，用call，当要传入多个对象的时候，用apply

其他用途–对象继承

由于可以改变this的指向，所以也就可以实现对象的继承

1
2
3
4
5
6
7
8
9
10
11
12
13
function superClass () {
	this.a =	1;
	this.print = function () {
		console.log(this.a)
	}
}

function subClass () {
	superClass.call(this);
	this.print();
}

subClass();

subClass通过call方法，继承了superClass的print方法和a变量，同时subClass还可以扩展自己的方法